Workflow Lifecycle Screen
คู่มืออธิบายการทำงานของหน้าจอจัดการ Workflow

01บทนำ · About Workflow Lifecycle

โครงสร้างและวัตถุประสงค์ของหน้าจอ Workflow Lifecycle

หน้าจอ Workflow Lifecycle ทำหน้าที่ออกแบบและจัดการ Workflowที่ใช้ผูกกับ Task ในระบบ QC · แต่ละ Workflow กำหนด:

• ลำดับขั้นตอน (Steps) ที่ Task จะเดินผ่าน · เช่น Created → Assigned → In Progress → Review → Done
• ผู้รับผิดชอบต่อขั้นตอน (Role Owner) · เช่น QCM · QC Inspector · PM
• SLA (ชั่วโมง) · เวลาที่ควรใช้ต่อขั้นตอน
• Transitions · เส้นทางเปลี่ยน State พร้อม Trigger (auto/pass/fail/block/unblock)
• รอบแก้ไข (Rework Loop) · เมื่อไม่ผ่านจะส่งกลับให้แก้

02ภาพรวม 3 หน้าจอหลัก

Workflow Lifecycle ประกอบด้วย 3 view หลัก · List → Create → Builder

🔗 การไหลระหว่างหน้าจอ

03Workflow List · หน้ารายการ

แสดง Workflow ทั้งหมดในระบบ · จุดเริ่มต้นเมื่อเข้าหน้า

🖼️ Layout ของหน้า

• Breadcrumb: Quality Control / Workflow Lifecycle
• Page title: "Workflow Lifecycle" + subtitle "ออกแบบ Workflow สำหรับผูกกับ Task QC"
• Action bar (ขวาบน): ปุ่ม "สร้าง Workflow ใหม่" (primary), "ใช้ Template มาตรฐาน", "นำเข้า Excel"
• Table: รายการ Workflow ทั้งหมด · เรียงตาม updatedAt DESC

📋 คอลัมน์ในตาราง

📝 ตัวอย่าง Data ใน seed

⚡ Actions ในหน้า List

1. สร้าง Workflow ใหม่: เปิด Create Modal (ดูหัวข้อ 04)
2. ใช้ Template มาตรฐาน: เปิด Template Picker (ดูหัวข้อ 10) · เลือก 1 ใน 3 templates → กด "ใช้ Template นี้"
3. นำเข้า Excel: เปิด file picker (.xlsx) · Parse Meta + Steps + Transitions → เปิด Import Preview (ดูหัวข้อ 11)
4. คลิกแถว: เข้า Builder เพื่อแก้ Workflow · route /inspection/workflow/:id/edit
5. Duplicate: สร้างสำเนา (นามใหม่ "...(สำเนา)") · เปิด Builder ใหม่
6. Delete: เปิด Confirm dialog · ห้ามลบถ้ามี tasksUsing > 0

04Create Workflow · หน้าสร้างใหม่

Modal 2 sections · Basic Info + Starting Template

🖼️ Layout ของ Modal

• Header: "สร้าง Workflow ใหม่" + subtitle
• Section 1 · ข้อมูลพื้นฐาน: Name TH · Name EN · Description TH · Description EN · Version
• Section 2 · เลือก Base Template: radio 2 ตัวเลือก · Blank vs QC Standard
• Footer: ปุ่ม "ยกเลิก" (secondary) + "สร้าง" (primary)

📝 Fields ในฟอร์ม

📋 2 Base Templates ในหน้า Create

⚡ ขั้นตอนการสร้าง

1. กดปุ่ม "สร้าง Workflow ใหม่" ในหน้า List → เปิด Modal
2. กรอก Name TH + Name EN (required)
3. (Optional) กรอก Description TH + Description EN
4. ตั้ง Version (default "v1.0")
5. เลือก Base Template (Blank หรือ QC Standard)
6. กดปุ่ม "สร้าง"
7. ระบบสร้าง Workflow (status: Draft) · toast "สร้าง Workflow เรียบร้อย เปิด Builder ให้แก้ไขต่อ"
8. ระบบเปิด Builder view อัตโนมัติ (route /inspection/workflow/:id/edit)

05Workflow Builder · หน้าแก้ไข

Full-screen editor · Steps + Transitions + Diagram · Save/Publish/Delete/Duplicate

🖼️ Layout ของ Builder

• Header row (top): Back icon (circular) + Title "Workflow: {name}" + Status pill + Action buttons (Save · Publish · Duplicate · Delete · Export)
• Section 1 · Meta: ข้อมูล Workflow (name TH/EN · desc · version) แก้ inline
• Section 2 · Steps & Assignees: ตาราง steps · reorder (up/down) · add/delete · edit inline
• Section 3 · Transitions: ตาราง transitions · add/delete · dropdown from/to states + trigger
• Section 4 · Diagram: Auto-drawn diagram แสดง flow ทั้งหมด · state colors match palette

📋 Section 2 · Steps & Assignees

ตารางแสดงและแก้ Steps ของ Workflow · แต่ละแถวคือ 1 step

ปุ่ม "+ เพิ่มขั้นตอน": เพิ่ม step ใหม่ท้ายรายการ · default state=in_progress, role=QC Inspector, sla=24

🔀 Section 3 · Transitions (State Transitions)

ตารางแสดงเส้นทางเปลี่ยน State · แต่ละแถวคือ 1 transition

ปุ่ม "+ เพิ่มเส้นทาง": default from=in_progress, to=review, trigger=pass

📊 Section 4 · Diagram

แผนภาพอัตโนมัติ · แสดง State nodes สีตาม palette · เส้น transitions พร้อม trigger label · ให้ผู้ใช้เห็นภาพรวม lifecycle

⚡ Action buttons (top-right)

067 Lifecycle States

7 states มาตรฐาน · แต่ละ state มีสี · terminal flag · main flag

07Transitions + 6 Triggers

การเปลี่ยน State · trigger types + สี + ความหมาย

🔄 ตัวอย่าง Transitions ใน QC Standard Template (8 transitions)

08Roles + SLA

6 role options สำหรับกำหนดผู้รับผิดชอบต่อ step

⏱️ SLA (Service Level Agreement)

SLA เป็นจำนวนชั่วโมงที่ควรใช้ต่อ step · ใช้ในการแจ้งเตือน / dashboard escalation

• SLA = 24 → 1 วันทำการ · ทั่วไป
• SLA = 8 → ครึ่งวัน · งานเร่งด่วน
• SLA = 0 → ไม่มี SLA · เช่น terminal state Done
• SLA เกินกำหนด → แสดง escalation flag ใน Task List

093 Standard Templates

Templates พร้อมใช้ใน Template Picker · ปรับแต่งต่อใน Builder

📋 QC Standard Template · รายละเอียด 7 Steps

10Template Picker Modal

Modal 2-column · เลือก Template + ดู preview · 3 tabs (Steps / Transitions / Diagram)

🖼️ Layout

• Header: "เลือกเทมเพลต Workflow" + subtitle "เลือกแม่แบบที่จะเริ่มต้น"
• Left column (aside): รายการ 3 Templates เป็น cards · เลือก 1 · แสดง check ✓
• Right column (main): รายละเอียด Template ที่เลือก · title + description + 3 tabs
• Footer: "ยกเลิก" + "นำออก Excel เปล่า" + "นำออก Excel พร้อมข้อมูล" + "ใช้ Template นี้"

📊 3 Tabs ในหน้ารายละเอียด

1. Tab 01 · Steps: ตาราง Steps ทั้งหมด · #, State (pill), Role, SLA, Note
2. Tab 02 · Transitions: ตาราง Transitions · #, From→To, Trigger (colored pill), Label
3. Tab 03 · Diagram: แผนภาพ auto-drawn · State nodes สี · เส้นเชื่อม trigger

⚡ Actions

11Import / Export Excel

รูปแบบไฟล์ · 3 sheets · Preview ก่อน import

📄 รูปแบบไฟล์ Excel (3 sheets)

Sheet 1 · Meta

Sheet 2 · Steps

Sheet 3 · Transitions

📥 Import flow

1. กดปุ่ม "นำเข้า Excel" ในหน้า List → เปิด file picker
2. เลือกไฟล์ .xlsx · ระบบ parse Meta + Steps + Transitions
3. เปิด Import Preview Modal · แสดงข้อมูลที่จะสร้าง · จำนวน steps + transitions
4. ตรวจสอบ · กด "ยืนยันนำเข้า" → สร้าง Workflow (status: Draft) → เปิด Builder
5. Toast "นำเข้า Workflow เรียบร้อย"

📤 Export flow

• Export จาก Builder: ปุ่ม Export ใน Action bar · Download .xlsx ของ Workflow ปัจจุบัน
• Export จาก Template Picker: Export empty (schema เปล่า) หรือ Export with data (มีตัวอย่าง)
• Filename: workflow-{id}.xlsx

12Workflow Status

3 statuses ของ Workflow เอง (แยกจาก Task states)

13Business Rules

กฎที่ต้อง enforce ใน backend + UI

1. Steps ≥ 1: ทุก Workflow ต้องมีอย่างน้อย 1 step · ห้ามลบ step สุดท้าย
2. Terminal state ต้องมี: Workflow ต้องมีอย่างน้อย 1 terminal state (default: done)
3. Transitions valid: from + to ต้องเป็น state ที่มีใน steps ของ Workflow นี้
4. ห้ามลบเมื่อ tasksUsing > 0: ใช้ Archive แทน · Task เดิมยังใช้ workflow เดิมต่อไป
5. Publish requires validation: ก่อน Publish ต้องผ่านการตรวจสอบ:
   • Name TH + EN ครบ
   • Steps ≥ 1
   • Terminal state มี
   • Transitions valid
6. Version bump: การแก้ Workflow ที่ Published + tasksUsing > 0 ควร bump version (v1.0 → v1.1) · เพื่อเก็บ history
7. Draft is private: Task ใหม่เลือก Draft workflow ไม่ได้ · เห็นเฉพาะ Published
8. Auto trigger execution: เมื่อ Task เข้า state ที่มี transition trigger=auto · ระบบจะ execute ทันที (async job)
9. SLA breach → alert: Task ที่ค้าง state > SLA hours จะ escalate ไป PM/QCM · แสดง flag ใน Task List
10. Blocked state พิเศษ: Task ที่ Blocked ต้อง Unblock ก่อนถึงจะเดินต่อได้ · block/unblock ต้องมี reason

14Appendix · Screen References + Data Model

🖼️ Screens (ใน source v2.0)

🗄️ Data Model (simplified)

Workflow {
  id: string             // e.g. "wf-tpl-qc-standard"
  nameTh: string
  nameEn: string
  descTh: string
  descEn: string
  version: string        // e.g. "v1.0"
  status: enum           // "draft" | "published" | "archived"
  steps: Step[]          // length ≥ 1
  transitions: Transition[]
  tasksUsing: number     // count of tasks bound
  updatedAt: date
  updatedBy: string
}

Step {
  id: string             // "s-1", "s-2", ...
  state: enum            // 7 states (created, assigned, in_progress, review, done, blocked, rejected)
  role: enum             // 6 roles + "—"
  slaHours: number       // hours · 0 = no SLA
  noteTh: string
  noteEn: string
}

Transition {
  id: string             // "t-1", "t-2", ...
  from: state            // state id
  to: state              // state id
  trigger: enum          // "auto" | "pass" | "fail" | "block" | "unblock" | "cancel"
  labelTh?: string       // button label displayed to user
  labelEn?: string
}

State (system-defined, 7 items) {
  id: string
  color: hex             // border/dot color
  bg: hex                // background
  fg: hex                // text color
  terminal: boolean      // true = ปิดถาวร (Done)
  main: boolean          // true = happy path
}

📌 Version History

• Workflow Lifecycle v2.0 · 2026-04 · Circular back icon + flex layout (source)
• เอกสารนี้ v1.0 · 7 ก.ค. 2569 · Initial release